<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>上市公司全景概览 - 大屏数据可视化案例</title>
    <link rel="stylesheet" type="text/css" href="css/app.css" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=k00PWaquNgc2UtaCfVBX70OnpYxF2VIU"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

</head>

<body>
    <header id="header">
        <h3 class="header-title">共享单车全景数据概览</h3>
        <div class="header-info header-info-l">数据更新时间：<span id="getDate"></span>(30秒刷新)</div>
        <div class="header-info header-info-r">数据日期：<span id="nowDate"></span></div>
    </header>

    <footer id="footer"></footer>

    <div id="container">
        <div id="flexCon">
            <div class="flex-row">
                <div class="flex-cell flex-cell-l">
                    <div class="chart-wrapper">
                        <div>
                            <h3 class="chart-title">站点访问量Top</h3>
                        </div>
                        <div class="chart-div" id="rankChart">

                            <div class="chart-loader">
                                <div class="loader"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex-cell flex-cell-c" style="padding-right:0;">
                    <div class="chart-wrapper">
                        <h3 class="chart-title">统计数据</h3>
                        <div class="chart-div chart-done">
                            <table class="data-t">
                                <tr>
                                    <th><img src="img/icon-01.png" /></th>
                                    <td>
                                        <p><span id="userIpSum">0</span></p>
                                        <p>用户访问量</p>
                                    </td>
                                    <th><img src="img/icon-02.png" /></th>
                                    <td>
                                        <p><span id="operationSum">0</span></p>
                                        <p>用户操作统计</p>
                                    </td>
                                </tr>
                                <tr>
                                    <th><img src="img/icon-03.png" /></th>
                                    <td>
                                        <p><span id="operationDragSum">0</span></p>
                                        <p>用户拖拽统计</p>
                                    </td>
                                    <th><img src="img/icon-04.png" /></th>
                                    <td>
                                        <p><span id="operationLevelAdjustSum">0</span></p>
                                        <p>用户放缩地图统计</p>
                                    </td>
                                </tr>
                                <!-- <tr>
                                    <th><img src="img/icon-05.png" /></th>
                                    <td>
                                        <p><span id="shRatio">0</span></p>
                                        <p>上市平均市盈率</p>
                                    </td>
                                    <th><img src="img/icon-06.png" /></th>
                                    <td>
                                        <p><span id="szRatio">0</span></p>
                                        <p>深市平均市盈率</p>
                                    </td>
                                </tr> -->
                            </table>
                        </div>
                    </div>
                </div>
                <div class="flex-cell flex-cell-r" style="padding-left:0;">
                    <div class="chart-wrapper">
                        <h3 class="chart-title">站点被点击次数地域分布</h3>
                        <div class="chart-div" id="mapChart">
                            <!-- <div class="chart-loader">
                                <div class="loader"></div>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-row">
                <div class="flex-cell flex-cell-lc" style="padding-bottom:0;">
                    <div class="chart-wrapper">
                        <h3 class="chart-title">共享单车站点点击数</h3>
                        <div class="chart-div" id="trendChart">
                            <div class="chart-loader">
                                <div class="loader"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex-cell flex-cell-r" style="padding-bottom:0;">
                    <div class="chart-wrapper">
                        <h3 class="chart-title">用户操作分类</h3>
                        <div class="chart-div" id="csrcChart">
                            <div class="chart-loader">
                                <div class="loader"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
    </script>
    <script src="./js/jquery-3.1.1.js"></script>

    <script src="./js/countUp.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/echarts-map-china.js"></script>
    <script src="./js/echarts-theme-shine.js"></script>


    <script src="./js/dataView.js"></script>
</body>

</html>